<template>
  <el-form ref="formRef" label-position="left" label-width="auto" class="zw-table-search">
    <el-row :gutter="20">
      <el-col v-for="(item1, index1) in deepCopOptionList" :key="index1" :span="formatSpan">
        <el-form-item :label="item1.label" :class="item1.combine?'combine_time':''">
          <el-input v-if="item1.type === 'input'" v-model="item1.value" placeholder="请输入" clearable />
          <template v-if="item1.click">
            <el-select v-if="item1.type === 'select'" v-model="item1.value" placeholder="请选择" clearable @click="item1.click" 
              popper-class="zw-hide_select_option" :multiple="item1.multiple" :multiple-limit="item1.limit">
              <el-option v-for="item2 in item1.option" :key="item2.value" :label="item2.label" :value="item2.value" />
            </el-select>
          </template>
          <template v-else>
            <el-select v-if="item1.type === 'select'" v-model="item1.value" placeholder="请选择" clearable >
              <el-option v-for="item2 in item1.option" :key="item2.value" :label="item2.label" :value="item2.value" />
            </el-select>
          </template>
          
          <el-date-picker v-if="item1.type === 'datePicker'" v-model="item1.value" type="datetimerange" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">清空</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
  /**
  input 常规输入框
  select 常规下拉选择框
  DatePicker 常规日期选择框
*/

  import { ref, computed,watch } from 'vue'
  import { deepCopy } from '@/utils/helper'
  const formRef = ref(null);
  interface Props {
    itemNum?: number // 一行展示多少个item
    option: any // 筛选项
  }

  const props = withDefaults(defineProps<Props>(), {
    itemNum: 4,
    option: []
  })
  const emits = defineEmits(['search'])
  const formatSpan = computed(() => 24 / props.itemNum)
  // const deepCopOptionList = computed(()=>{
  //   return props.option
  // })
  const deepCopOptionList = ref(deepCopy(props.option))
  // 查询
  const onSubmit = () => {
    let searchKey = {}
    let key='add_time'
    for (let item of deepCopOptionList.value) {
      if (![null, NaN, undefined, ''].includes(item.value)){
        if(item.filter){
          key = item.value
        }
        if(item.combine){
          searchKey[key] = [item.value[0],item.value[1]]
        }
        searchKey[item.key] = item.value
      } 
    }
    emits('search', searchKey)
  }
  // 重置
  const onReset = () => {
    deepCopOptionList.value = deepCopy(props.option)
    formRef.value.resetFields()
    onSubmit()
  }
  defineExpose({
    onReset
  })
</script>

<style lang="scss">
  .zw-table-search {
    padding: 16px;
    background-color: #f9f9f9;

    .el-row {
      margin: -6px -10px;

      .el-col {
        margin: 6px 0;

        &:last-of-type {
          flex: auto;
          text-align: right;
        }
         .combine_time{
            .el-form-item__label-wrap{
              margin-right: 0!important;
              margin-left: -10px;
            }
          }

        .el-form-item {
          margin-bottom: 0;
         
          .el-form-item__label-wrap {
            // margin-right: 0 !important;

            .el-form-item__label {
              font-size: 14px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
